<template>
	<mescroll-uni class="mescroll" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @init="mescrollInit" @emptyclick="emptyClick" @topclick="topClick">
		<view class="order">
			<view class="order_item" v-for="(item, index) in lists" :key="index" v-if="item.id">
				<view class="box1" @tap="roomDetails(item)">
					<view class="box1_left">
						<view class="title">{{ item.room_no + item.room_type}} {{item.storey + '楼'}}</view>
						<view class="room">{{ item.roomtype }} {{ item.amount }} 元</view>
					</view>
					<view class="box1_right uni-clearfix">
						<view style="color: #999;" v-if="item.new_order_state == '已完成' ">{{ item.new_order_state }}</view>
						<view v-if="item.new_order_state != '已完成' ">{{ item.new_order_state }}</view>
						<image class="img" src="/static/personal-center/right.png"></image>
					</view>
				</view>
				<view class="box2">
					<view class="box2_left">预约到店 {{ item.new_time }}</view>
					<view class="box2_right" v-if="item.new_btn">
						<view class="box2_right_b" v-if="item.new_btn != '取消订单'"
						@tap="coupleBack(item)">{{ item.new_btn }}</view>
						<view class="box2_right_q" v-if="item.new_btn == '取消订单'" 
						@tap="coupleBack(item)">{{ item.new_btn }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹层 -->
		<layer v-if="layerShow">
			<view slot="text1">
				提示
			</view>
			<view slot="text2">
				确认取消订单么？
			</view>
			<view slot="btn1" @tap="layerClose">取消</view>
			<view slot="btn2" @tap="layerFinish">确定</view>
		</layer>
	</mescroll-uni>
</template>

<script>
let flag = false;
import layer from "@/components/layer/layer.vue";
import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
export default {
	props: ['lists'],
	components: {
		MescrollUni,layer
	},
	data() {
		return {
			layerShow:false,
			mescroll: null, //mescroll实例对象
			downOption: {
				use: true, // 是否启用下拉刷新; 默认true
				auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				autoShowLoading: true, // 如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认false
				isLock: false, // 是否锁定下拉刷新,默认false;
				isBoth: true, // 下拉刷新时,如果滑动到列表底部是否可以同时触发上拉加载;默认true,两者可同时触发;
				offset: 60, // 在列表顶部,下拉大于80upx,松手即可触发下拉刷新的回调
				inOffsetRate: 1, // 在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
				outOffsetRate: 0.2, // 在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
				bottomOffset: 20, // 当手指touchmove位置在距离body底部20upx范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行
				minAngle: 45, // 向下滑动最少偏移的角度,取值区间  [0,90];默认45度,即向下滑动的角度大于45度则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;
				textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
				textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
				textLoading: '正在刷新...' // 加载中的提示文本
			},
			upOption: {
				use: true, // 是否启用上拉加载; 默认true
				auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				isLock: false, // 是否锁定上拉加载,默认false;
				isBoth: true, // 上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认true,两者可同时触发;
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10, // 每页数据的数量
					time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
				},
				noMoreSize: 3, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
				textLoading: '加载中 ...', // 加载中的提示文本
				textNoMore: '-- END --', // 没有更多数据的提示文本
				toTop: {
					// 回到顶部按钮,需配置src才显示
					src: 'http://www.mescroll.com/img/mescroll-totop.png', // 图片路径
					offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000
					duration: 300 // 回到顶部的动画时长,默认300ms
				},
				empty: {
					use: true, // 是否显示空布局
					icon: 'http://www.mescroll.com/img/mescroll-empty.png', // 图标路径
					tip: '~ 暂无相关数据 ~', // 提示
					btnText: '去逛逛 >', // 按钮
					fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效
					top: '35%', // fixed定位的top值 (完整的单位值,如 "35%"; "300upx")
					zIndex: 99 // fixed定位z-index值
				}
			}
		};
	},
	onUnload() {
		this.mescroll = null;
	},
	//注册滚动到底部的事件,用于上拉加载
	onReachBottom() {
		this.mescroll && this.mescroll.onReachBottom();
	},
	//注册列表滚动事件,用于下拉刷新
	onPageScroll(e) {
		this.mescroll && this.mescroll.onPageScroll(e);
	},
	methods: {
		roomDetails(e) {
			//console.log(e.id)
			uni.navigateTo({
				url: '/pages/hotel/myorder/particulars?id=' + e.id
			});
		},
		/**
		 * 蒙层返回完成
		 */
		layerFinish() {
			
		},
		/**
		 * 关闭蒙层
		 */
		layerClose() {
			this.layerShow = false;
			flag = false;
		},
		/**
		 * 打开蒙层
		 */
		openlayer(callback) {
			this.layerShow = true;
			this.layerFinish = () => {
				this.layerClose();
				callback();
			}
		},
		query(item) {
			uni.showToast({
				title: '我对此订单有疑问',
				icon: 'none'
			});
		},
		coupleBack(item) {
			/**
			 * 待接单删除此条数据
			 */
			if (flag) {
				return;
			}
			flag = true;
			if (item.new_btn == '取消订单') {
				this.openlayer(()=>{
					
					this.req(
						{
							url: 'both/cancelOrder',
							method: 'GET',
							data: {
								id: item.id,
								position: 2,
								uid: this.isLogin().id
							}
						},
						res => {
							if (res.data.status == 0) {
								uni.showToast({
									title: res.data.message,
									icon: 'none'
								});
								flag = false;
								return;
							}
							uni.$emit('order', item.id);
							uni.showToast({
								title: '取消完成',
								icon: 'none'
							});
							flag = false;
						}
					);
				})
				return;
			}
			if (item.new_btn == '确认完成') {
				this.req(
					{
						url: 'both/finishOrder',
						method: 'GET',
						data: {
							id: item.order_id
						}
					},
					res => {
						if (res.data.status == 0) {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
							flag = false;
							return;
						}
						uni.$emit('order', item.id);
						uni.showToast({
							title: '确认完成',
							icon: 'none'
						});
						flag = false;
					}
				);
				return;
			}
			// if(item.new_btn == '退款详情'){
			// 	uni.navigateTo({
			// 		url: '/pages/hotel/myorder/refund?id=' + item.id
			// 	});
			// 	return;
			// }
			if (item.new_btn == '立即评价') {
				let d = {};
				d.hotel_id = item.hid;
				d.clean_id = item.cid;
				d.order_id = item.order_id;
				d.order_status_id = item.osid;
				let data = JSON.stringify(d);
				uni.navigateTo({
					url: '/pages/hotel/service/evaluate?data=' + data
				});
				flag = false;
				return;
			}
			if (item.new_btn == '查看评价') {
				console.log(item)
				let title1 = item.room_no + item.room_type + ' ' + item.storey + '楼'
				let title2 = item.roomtype + item.amount + '元'
				uni.navigateTo({
					url: '/pages/hotel/myorder/evaluate?id=' + item.order_id + '&title1=' + title1 + '&title2=' + title2
				});
				flag = false;
				return;
			}
		},
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		/*下拉刷新的回调 */
		downCallback(mescroll) {
			// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
			// loadSwiper();
			// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
			mescroll.resetUpScroll();
			this.$emit('upload');
			setTimeout(() => {
				mescroll.endSuccess(10);
			}, 500);
		},
		upCallback(mescroll) {},
		emptyClick() {
			uni.showToast({
				title: '点击了按钮'
			});
		},
		// 点击回到顶部按钮的回调
		topClick() {
			console.log('点击了回到顶部按钮');
		}
	}
};
</script>

<style scoped lang="scss">
.mescroll{background-color: #f8f8f8;}
.order {
	color: #333333;
	/* #ifdef APP-PLUS */
	min-height: calc( 100vh - var(--status-bar-height) - 208upx );
	/* #endif */
	/* #ifndef APP-PLUS */
	min-height: calc( 100vh - 258upx );
	/* #endif */
	width: 702upx;
	padding: 24upx;
	
	.order_item {
		width: 646upx;
		height: 206upx;
		background-color: #ffffff;
		box-shadow: 2upx 2upx 20upx 0 rgba(0, 0, 0, 0.15);
		border-radius: 8upx;
		margin-bottom: 22upx;
		padding: 28upx;
		line-height: 1;

		.box1 {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1upx solid #e5e5e5;

			.box1_left {
				.title {
					font-size: 32upx;
					line-height: 58upx;
				}

				.room {
					font-size: 28upx;
					line-height: 54upx;
					color: #999999;
				}
			}

			.box1_right {
				font-size: 24upx;
				color: #f7310c;
				line-height: 58upx;

				.ac {
					color: #999999;
				}

				.img {
					width: 14upx;
					height: 24upx;
					padding: 15upx 0;
					float: right;
				}
			}
		}

		.box2 {
			width: 100%;
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text-align: center;

			.box2_left {
				width: 280upx;
				height: 40upx;
				background-color: #f8f8f8;
				border-radius: 8upx;
				font-size: 20upx;
				color: #999999;
				line-height: 40upx;
			}

			.box2_right {
				display: flex;

				.box2_right_a {
					width: 160upx;
					height: 60upx;
					font-size: 24upx;
					border-radius: 8upx;
					line-height: 60upx;
					color: #999;
					border: solid 2upx #e5e5e5;
				}
				.box2_right_q {
					width: 160upx;
					height: 60upx;
					font-size: 24upx;
					border-radius: 8upx;
					line-height: 60upx;
					border: solid 2upx #e5e5e5;
					color: #999;
					margin-left: 20upx;
				}
				.box2_right_b {
					width: 160upx;
					height: 60upx;
					font-size: 24upx;
					border-radius: 8upx;
					line-height: 60upx;
					border: solid 2upx #3595f9;
					color: #3595f9;
					margin-left: 20upx;
				}
			}
		}
	}
}
</style>
